<template>
  <div class="suppliers-dashboard">
    <h1 class="page-title">供应商绩效</h1>
    
    <!-- 供应商总览 -->
    <el-row :gutter="20">
      <el-col :span="6" v-for="(stat, index) in supplierStats" :key="index">
        <el-card class="stat-card" :class="`card-${index + 1}`">
          <div class="stat-icon">
            <el-icon>
              <component :is="stat.icon" />
            </el-icon>
          </div>
          <div class="stat-title">{{ stat.title }}</div>
          <div class="stat-value">{{ stat.format(animatedValues[index]) }}</div>
          <div class="stat-change" :class="stat.trend">
            <el-icon>
              <component :is="stat.trend === 'up' ? 'ArrowUp' : 'ArrowDown'" />
            </el-icon>
            {{ stat.change }}
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <!-- 筛选条件 -->
    <div class="filter-section">
      <el-card>
        <div class="filter-container">
          <div class="filter-item">
            <el-select v-model="selectedCategory" placeholder="供应商分类">
              <el-option v-for="item in categories" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </div>
          <div class="filter-item">
            <el-select v-model="selectedRegion" placeholder="地区筛选">
              <el-option v-for="item in regions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </div>
          <div class="filter-item">
            <el-select v-model="timeRange" placeholder="时间范围">
              <el-option label="最近一个月" value="month" />
              <el-option label="最近一季度" value="quarter" />
              <el-option label="最近一年" value="year" />
            </el-select>
          </div>
          <div class="filter-item">
            <el-button type="primary" @click="applyFilters">应用筛选</el-button>
            <el-button @click="resetFilters">重置</el-button>
          </div>
        </div>
      </el-card>
    </div>
    
    <!-- 绩效分析区域 -->
    <el-row :gutter="20" style="margin-top: 20px;">
      <!-- 供应商综合评分排名 -->
      <el-col :span="14">
        <el-card class="chart-card">
          <template #header>
            <div class="chart-header">
              <h3>供应商综合评分排名</h3>
              <div class="chart-controls">
                <el-select v-model="rankLimit" size="small" style="width: 100px;">
                  <el-option label="前5名" value="5" />
                  <el-option label="前10名" value="10" />
                  <el-option label="前20名" value="20" />
                </el-select>
              </div>
            </div>
          </template>
          <div class="chart" id="supplier-rank-chart"></div>
        </el-card>
      </el-col>
      
      <!-- 绩效分布 -->
      <el-col :span="10">
        <el-card class="chart-card">
          <template #header>
            <div class="chart-header">
              <h3>绩效分布</h3>
            </div>
          </template>
          <div class="chart" id="performance-distribution-chart"></div>
        </el-card>
      </el-col>
    </el-row>
    
    <!-- 质量和交付 -->
    <el-row :gutter="20" style="margin-top: 20px;">
      <!-- 质量趋势 -->
      <el-col :span="12">
        <el-card class="chart-card">
          <template #header>
            <div class="chart-header">
              <h3>质量指标趋势</h3>
              <div class="chart-controls">
                <el-checkbox-group v-model="qualityMetrics" size="small">
                  <el-checkbox label="defect">不良率</el-checkbox>
                  <el-checkbox label="return">退货率</el-checkbox>
                  <el-checkbox label="complaint">投诉率</el-checkbox>
                </el-checkbox-group>
              </div>
            </div>
          </template>
          <div class="chart" id="quality-trend-chart"></div>
        </el-card>
      </el-col>
      
      <!-- 交付趋势 -->
      <el-col :span="12">
        <el-card class="chart-card">
          <template #header>
            <div class="chart-header">
              <h3>交付指标趋势</h3>
              <div class="chart-controls">
                <el-checkbox-group v-model="deliveryMetrics" size="small">
                  <el-checkbox label="ontime">准时交付率</el-checkbox>
                  <el-checkbox label="complete">完整交付率</el-checkbox>
                  <el-checkbox label="leadtime">平均交期</el-checkbox>
                </el-checkbox-group>
              </div>
            </div>
          </template>
          <div class="chart" id="delivery-trend-chart"></div>
        </el-card>
      </el-col>
    </el-row>
    
    <!-- 价格与响应 -->
    <el-row :gutter="20" style="margin-top: 20px;">
      <!-- 价格竞争力 -->
      <el-col :span="12">
        <el-card class="chart-card">
          <template #header>
            <div class="chart-header">
              <h3>价格竞争力分析</h3>
              <div class="chart-controls">
                <el-radio-group v-model="priceMetric" size="small">
                  <el-radio-button label="variance">价格差异</el-radio-button>
                  <el-radio-button label="trend">趋势变化</el-radio-button>
                </el-radio-group>
              </div>
            </div>
          </template>
          <div class="chart" id="price-analysis-chart"></div>
        </el-card>
      </el-col>
      
      <!-- 响应速度 -->
      <el-col :span="12">
        <el-card class="chart-card">
          <template #header>
            <div class="chart-header">
              <h3>响应速度分析</h3>
            </div>
          </template>
          <div class="chart" id="response-time-chart"></div>
        </el-card>
      </el-col>
    </el-row>
    
    <!-- 供应商合作关系矩阵 -->
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="24">
        <el-card class="chart-card">
          <template #header>
            <div class="chart-header">
              <h3>供应商合作关系矩阵</h3>
              <div class="chart-controls">
                <el-tooltip content="基于供应商重要性和替代难度的战略分析" placement="top">
                  <el-icon class="info-icon"><InfoFilled /></el-icon>
                </el-tooltip>
              </div>
            </div>
          </template>
          <div class="chart" id="supplier-matrix-chart"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, watch } from 'vue'
import * as echarts from 'echarts'
import { TrendCharts, Discount, AlarmClock, OfficeBuilding, InfoFilled } from '@element-plus/icons-vue'

// 供应商统计数据
const supplierStats = [
  {
    title: '活跃供应商',
    value: '325',
    numericValue: 325,
    format: (val: number) => Math.round(val).toString(),
    change: '+ 15',
    trend: 'up',
    icon: 'OfficeBuilding'
  },
  {
    title: '平均绩效分',
    value: '87.4',
    numericValue: 87.4,
    format: (val: number) => val.toFixed(1),
    change: '+ 2.3',
    trend: 'up',
    icon: 'TrendCharts'
  },
  {
    title: '平均交付周期',
    value: '12.5天',
    numericValue: 12.5,
    format: (val: number) => `${val.toFixed(1)}天`,
    change: '- 1.2天',
    trend: 'down',
    icon: 'AlarmClock'
  },
  {
    title: '平均价格变化',
    value: '3.2%',
    numericValue: 3.2,
    format: (val: number) => `${val.toFixed(1)}%`,
    change: '+ 0.5%',
    trend: 'up',
    icon: 'Discount'
  }
]

// 动画显示的值
const animatedValues = ref(supplierStats.map(() => 0))

// 动画效果函数
const animateValues = () => {
  // 为每个卡片创建动画
  supplierStats.forEach((stat, index) => {
    const targetValue = stat.numericValue
    const duration = 2000 // 动画持续2秒
    const startTime = Date.now()
    
    const animate = () => {
      const currentTime = Date.now()
      const elapsed = currentTime - startTime
      
      if (elapsed < duration) {
        // 使用easeOutExpo缓动函数让动画更自然
        const progress = 1 - Math.pow(1 - elapsed / duration, 3)
        animatedValues.value[index] = targetValue * progress
        requestAnimationFrame(animate)
      } else {
        animatedValues.value[index] = targetValue
      }
    }
    
    animate()
  })
}

// 筛选条件
const selectedCategory = ref('all')
const selectedRegion = ref('all')
const timeRange = ref('quarter')
const rankLimit = ref('10')
const qualityMetrics = ref(['defect', 'return'])
const deliveryMetrics = ref(['ontime', 'complete'])
const priceMetric = ref('variance')

// 筛选选项
const categories = [
  { label: '所有分类', value: 'all' },
  { label: '原材料供应商', value: 'materials' },
  { label: '零部件供应商', value: 'parts' },
  { label: '设备供应商', value: 'equipment' },
  { label: '服务供应商', value: 'service' }
]

const regions = [
  { label: '所有地区', value: 'all' },
  { label: '华东地区', value: 'east' },
  { label: '华南地区', value: 'south' },
  { label: '华北地区', value: 'north' },
  { label: '西南地区', value: 'southwest' },
  { label: '海外', value: 'overseas' }
]

// 图表实例
let rankChart: echarts.ECharts | null = null
let distributionChart: echarts.ECharts | null = null
let qualityChart: echarts.ECharts | null = null
let deliveryChart: echarts.ECharts | null = null
let priceChart: echarts.ECharts | null = null
let responseChart: echarts.ECharts | null = null
let matrixChart: echarts.ECharts | null = null

// 筛选方法
const applyFilters = () => {
  // 重新初始化图表，应用筛选条件
  initRankChart()
  initDistributionChart()
  initQualityChart()
  initDeliveryChart()
  initPriceChart()
  initResponseChart()
  initMatrixChart()
}

const resetFilters = () => {
  selectedCategory.value = 'all'
  selectedRegion.value = 'all'
  timeRange.value = 'quarter'
  applyFilters()
}

// 初始化供应商排名图表
const initRankChart = () => {
  if (!rankChart) {
    rankChart = echarts.init(document.getElementById('supplier-rank-chart') as HTMLElement)
  }
  
  // 生成模拟数据
  const limit = parseInt(rankLimit.value)
  const suppliers = Array.from({ length: limit }, (_, i) => `供应商${i + 1}`)
  const scores = Array.from({ length: limit }, () => (85 + Math.random() * 10).toFixed(1))
  const qualities = Array.from({ length: limit }, () => (80 + Math.random() * 15).toFixed(1))
  const deliveries = Array.from({ length: limit }, () => (80 + Math.random() * 15).toFixed(1))
  const prices = Array.from({ length: limit }, () => (75 + Math.random() * 20).toFixed(1))
  
  // 倒序排列
  suppliers.reverse()
  scores.reverse()
  qualities.reverse()
  deliveries.reverse()
  prices.reverse()
  
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      data: ['综合评分', '质量', '交付', '价格']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'value',
      max: 100
    },
    yAxis: {
      type: 'category',
      data: suppliers,
      axisLabel: {
        formatter: (value: string) => {
          if (value.length > 10) {
            return value.substring(0, 10) + '...'
          }
          return value
        }
      }
    },
    series: [
      {
        name: '综合评分',
        type: 'bar',
        label: {
          show: true,
          position: 'right',
          formatter: '{c}'
        },
        emphasis: {
          focus: 'series'
        },
        data: scores
      },
      {
        name: '质量',
        type: 'bar',
        stack: '总量',
        emphasis: {
          focus: 'series'
        },
        data: qualities
      },
      {
        name: '交付',
        type: 'bar',
        stack: '总量',
        emphasis: {
          focus: 'series'
        },
        data: deliveries
      },
      {
        name: '价格',
        type: 'bar',
        stack: '总量',
        emphasis: {
          focus: 'series'
        },
        data: prices
      }
    ]
  }
  
  rankChart.setOption(option)
}

// 初始化绩效分布图表
const initDistributionChart = () => {
  if (!distributionChart) {
    distributionChart = echarts.init(document.getElementById('performance-distribution-chart') as HTMLElement)
  }
  
  const option = {
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      right: 10,
      top: 'center',
      data: ['优秀 (90-100)', '良好 (80-89)', '一般 (70-79)', '较差 (60-69)', '待改进 (<60)']
    },
    series: [
      {
        name: '绩效分布',
        type: 'pie',
        radius: '70%',
        data: [
          { value: 56, name: '优秀 (90-100)', itemStyle: { color: '#67C23A' } },
          { value: 102, name: '良好 (80-89)', itemStyle: { color: '#409EFF' } },
          { value: 98, name: '一般 (70-79)', itemStyle: { color: '#E6A23C' } },
          { value: 45, name: '较差 (60-69)', itemStyle: { color: '#F56C6C' } },
          { value: 24, name: '待改进 (<60)', itemStyle: { color: '#909399' } }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }
  
  distributionChart.setOption(option)
}

// 初始化质量趋势图表
const initQualityChart = () => {
  if (!qualityChart) {
    qualityChart = echarts.init(document.getElementById('quality-trend-chart') as HTMLElement)
  }
  
  const months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
  const defectRates = [2.5, 2.3, 2.1, 2.4, 2.2, 2.0, 1.9, 1.8, 1.7, 1.6, 1.5, 1.4]
  const returnRates = [1.8, 1.7, 1.6, 1.7, 1.5, 1.4, 1.3, 1.2, 1.1, 1.0, 0.9, 0.8]
  const complaintRates = [1.0, 0.9, 1.1, 0.9, 0.8, 0.7, 0.7, 0.6, 0.6, 0.5, 0.5, 0.4]
  
  const series = []
  if (qualityMetrics.value.includes('defect')) {
    series.push({
      name: '不良率 (%)',
      type: 'line',
      data: defectRates
    })
  }
  if (qualityMetrics.value.includes('return')) {
    series.push({
      name: '退货率 (%)',
      type: 'line',
      data: returnRates
    })
  }
  if (qualityMetrics.value.includes('complaint')) {
    series.push({
      name: '投诉率 (%)',
      type: 'line',
      data: complaintRates
    })
  }
  
  const option = {
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: series.map(s => s.name)
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: months
    },
    yAxis: {
      type: 'value',
      name: '比率 (%)'
    },
    series
  }
  
  qualityChart.setOption(option)
}

// 初始化交付趋势图表
const initDeliveryChart = () => {
  if (!deliveryChart) {
    deliveryChart = echarts.init(document.getElementById('delivery-trend-chart') as HTMLElement)
  }
  
  const months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
  const ontimeRates = [85, 86, 87, 86, 88, 89, 90, 91, 92, 93, 94, 95]
  const completeRates = [88, 89, 90, 91, 92, 91, 93, 94, 95, 96, 96, 97]
  const leadtimes = [14, 13.5, 13, 13.2, 12.8, 12.5, 12, 11.8, 11.5, 11, 10.8, 10.5]
  
  const series = []
  if (deliveryMetrics.value.includes('ontime')) {
    series.push({
      name: '准时交付率 (%)',
      type: 'line',
      yAxisIndex: 0,
      data: ontimeRates
    })
  }
  if (deliveryMetrics.value.includes('complete')) {
    series.push({
      name: '完整交付率 (%)',
      type: 'line',
      yAxisIndex: 0,
      data: completeRates
    })
  }
  if (deliveryMetrics.value.includes('leadtime')) {
    series.push({
      name: '平均交期 (天)',
      type: 'line',
      yAxisIndex: 1,
      data: leadtimes
    })
  }
  
  const option = {
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: series.map(s => s.name)
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: months
    },
    yAxis: [
      {
        type: 'value',
        name: '比率 (%)',
        min: 80,
        max: 100
      },
      {
        type: 'value',
        name: '天数',
        min: 0,
        max: 20,
        position: 'right'
      }
    ],
    series
  }
  
  deliveryChart.setOption(option)
}

// 初始化价格分析图表
const initPriceChart = () => {
  if (!priceChart) {
    priceChart = echarts.init(document.getElementById('price-analysis-chart') as HTMLElement)
  }
  
  let option
  
  if (priceMetric.value === 'variance') {
    // 价格差异分析
    option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {
        data: ['市场均价', '实际采购价', '价差']
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: ['产品A', '产品B', '产品C', '产品D', '产品E', '产品F']
      },
      yAxis: [
        {
          type: 'value',
          name: '价格 (元)'
        },
        {
          type: 'value',
          name: '价差 (%)',
          position: 'right'
        }
      ],
      series: [
        {
          name: '市场均价',
          type: 'bar',
          data: [100, 220, 180, 350, 190, 280]
        },
        {
          name: '实际采购价',
          type: 'bar',
          data: [95, 200, 175, 340, 180, 270]
        },
        {
          name: '价差',
          type: 'line',
          yAxisIndex: 1,
          data: [5, 9.1, 2.8, 2.9, 5.3, 3.6]
        }
      ]
    }
  } else {
    // 价格趋势分析
    option = {
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['原材料A', '原材料B', '原材料C', '市场指数']
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
      },
      yAxis: {
        type: 'value',
        name: '价格指数'
      },
      series: [
        {
          name: '原材料A',
          type: 'line',
          data: [100, 102, 103, 105, 104, 108, 110, 112, 114, 115, 116, 118]
        },
        {
          name: '原材料B',
          type: 'line',
          data: [100, 99, 98, 100, 101, 103, 105, 106, 107, 109, 110, 112]
        },
        {
          name: '原材料C',
          type: 'line',
          data: [100, 101, 102, 104, 105, 108, 109, 112, 113, 115, 117, 120]
        },
        {
          name: '市场指数',
          type: 'line',
          lineStyle: {
            type: 'dashed'
          },
          data: [100, 101, 102, 103, 104, 106, 107, 109, 110, 112, 114, 116]
        }
      ]
    }
  }
  
  priceChart.setOption(option)
}

// 初始化响应速度图表
const initResponseChart = () => {
  if (!responseChart) {
    responseChart = echarts.init(document.getElementById('response-time-chart') as HTMLElement)
  }
  
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      }
    },
    legend: {
      data: ['询价响应时间', '问题解决时间', '响应满意度']
    },
    xAxis: [
      {
        type: 'category',
        data: ['供应商类型A', '供应商类型B', '供应商类型C', '供应商类型D'],
        axisPointer: {
          type: 'shadow'
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '时间 (小时)',
        min: 0,
        max: 30
      },
      {
        type: 'value',
        name: '满意度 (%)',
        min: 0,
        max: 100,
        position: 'right'
      }
    ],
    series: [
      {
        name: '询价响应时间',
        type: 'bar',
        data: [8.5, 12.3, 6.2, 14.5]
      },
      {
        name: '问题解决时间',
        type: 'bar',
        data: [24.6, 28.2, 18.7, 26.8]
      },
      {
        name: '响应满意度',
        type: 'line',
        yAxisIndex: 1,
        data: [92, 85, 95, 80]
      }
    ]
  }
  
  responseChart.setOption(option)
}

// 初始化供应商合作关系矩阵图
const initMatrixChart = () => {
  if (!matrixChart) {
    matrixChart = echarts.init(document.getElementById('supplier-matrix-chart') as HTMLElement)
  }
  
  // 生成随机数据
  const data = []
  const supplierNames = ['供应商A', '供应商B', '供应商C', '供应商D', '供应商E', 
                         '供应商F', '供应商G', '供应商H', '供应商I', '供应商J',
                         '供应商K', '供应商L', '供应商M', '供应商N', '供应商O']
  const supplierTypes = ['战略合作', '重要合作', '一般合作', '临时合作']
  
  for (let i = 0; i < 30; i++) {
    const importance = Math.random() * 10
    const difficulty = Math.random() * 10
    const volume = Math.random() * 500 + 100
    const type = supplierTypes[Math.floor(Math.random() * 4)]
    const name = i < 15 ? supplierNames[i] : `供应商${i + 1}`
    
    data.push([
      importance,
      difficulty,
      volume,
      name,
      type
    ])
  }
  
  const option = {
    title: {
      text: '供应商战略定位矩阵',
      subtext: '基于供应商重要性和替代难度',
      left: 'center'
    },
    tooltip: {
      formatter: function (param: any) {
        return param.data[3] + '<br/>' +
          '类型: ' + param.data[4] + '<br/>' +
          '重要性: ' + param.data[0].toFixed(1) + '<br/>' +
          '替代难度: ' + param.data[1].toFixed(1) + '<br/>' +
          '采购金额: ' + param.data[2].toFixed(0) + '万元'
      }
    },
    xAxis: {
      type: 'value',
      name: '供应商重要性',
      max: 10,
      splitNumber: 10,
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed'
        }
      }
    },
    yAxis: {
      type: 'value',
      name: '替代难度',
      max: 10,
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed'
        }
      }
    },
    visualMap: [
      {
        show: false,
        dimension: 4,
        categories: supplierTypes,
        inRange: {
          color: ['#C23531', '#61A0A8', '#D48265', '#91C7AE']
        }
      }
    ],
    series: [
      {
        name: '供应商矩阵',
        type: 'scatter',
        symbolSize: function (data: any) {
          return Math.sqrt(data[2]) / 3
        },
        encode: {
          x: 0,
          y: 1,
          tooltip: [3, 4, 0, 1, 2]
        },
        data: data,
        markLine: {
          symbol: ['none', 'none'],
          label: {show: false},
          data: [
            {xAxis: 5},
            {yAxis: 5}
          ]
        },
        markArea: {
          silent: true,
          itemStyle: {
            opacity: 0.1
          },
          data: [
            [
              {xAxis: 5, yAxis: 5},
              {xAxis: 10, yAxis: 10}
            ],
            [
              {xAxis: 0, yAxis: 5},
              {xAxis: 5, yAxis: 10}
            ],
            [
              {xAxis: 5, yAxis: 0},
              {xAxis: 10, yAxis: 5}
            ],
            [
              {xAxis: 0, yAxis: 0},
              {xAxis: 5, yAxis: 5}
            ]
          ]
        }
      }
    ]
  }
  
  matrixChart.setOption(option)
}

// 监听筛选条件变化
watch(rankLimit, () => {
  initRankChart()
})

watch(qualityMetrics, () => {
  initQualityChart()
})

watch(deliveryMetrics, () => {
  initDeliveryChart()
})

watch(priceMetric, () => {
  initPriceChart()
})

// 自适应图表大小
const handleResize = () => {
  rankChart?.resize()
  distributionChart?.resize()
  qualityChart?.resize()
  deliveryChart?.resize()
  priceChart?.resize()
  responseChart?.resize()
  matrixChart?.resize()
}

// 在组件挂载后初始化图表
onMounted(() => {
  // 初始化所有图表
  initRankChart()
  initDistributionChart()
  initQualityChart()
  initDeliveryChart()
  initPriceChart()
  initResponseChart()
  initMatrixChart()
  
  // 添加窗口大小变化监听
  window.addEventListener('resize', handleResize)
  
  // 启动数值动画
  animateValues()
})

// 在组件卸载前销毁图表实例
onBeforeUnmount(() => {
  // 销毁所有图表实例
  rankChart?.dispose()
  distributionChart?.dispose()
  qualityChart?.dispose()
  deliveryChart?.dispose()
  priceChart?.dispose()
  responseChart?.dispose()
  matrixChart?.dispose()
  
  // 清空引用
  rankChart = null
  distributionChart = null
  qualityChart = null
  deliveryChart = null
  priceChart = null
  responseChart = null
  matrixChart = null
  
  // 移除窗口大小变化监听
  window.removeEventListener('resize', handleResize)
})
</script>

<style scoped>
.suppliers-dashboard {
  padding: 20px;
}

.page-title {
  font-size: 24px;
  margin-bottom: 20px;
  color: #303133;
}

/* 统计卡片样式 */
.stat-card {
  /* height: 120px; */
  /* padding: 15px; */
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.stat-card.card-1 {
  background: linear-gradient(135deg, rgba(64,158,255,0.1) 0%, rgba(255,255,255,1) 100%);
}

.stat-card.card-2 {
  background: linear-gradient(135deg, rgba(103,194,58,0.1) 0%, rgba(255,255,255,1) 100%);
}

.stat-card.card-3 {
  background: linear-gradient(135deg, rgba(230,162,60,0.1) 0%, rgba(255,255,255,1) 100%);
}

.stat-card.card-4 {
  background: linear-gradient(135deg, rgba(245,108,108,0.1) 0%, rgba(255,255,255,1) 100%);
}

.stat-icon {
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 24px;
  opacity: 0.5;
  color: #606266;
}

.stat-title {
  font-size: 14px;
  color: #909399;
  margin-bottom: 15px;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 15px;
}

.stat-change {
  font-size: 12px;
  display: flex;
  align-items: center;
}

.stat-change.up {
  color: #67C23A;
}

.stat-change.down {
  color: #F56C6C;
}

/* 筛选区域样式 */
.filter-section {
  margin: 20px 0;
}

.filter-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.filter-item {
  margin-right: 15px;
  margin-bottom: 10px;
}

/* 图表卡片样式 */
.chart-card {
  margin-bottom: 20px;
  height: 400px;
}

.chart {
  width: 100%;
  height: 330px;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chart-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: #303133;
}

.chart-controls {
  display: flex;
  align-items: center;
}

.info-icon {
  color: #909399;
  cursor: pointer;
  font-size: 18px;
}

@media screen and (max-width: 768px) {
  .stat-card {
    margin-bottom: 15px;
  }
  
  .filter-container {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .filter-item {
    width: 100%;
    margin-bottom: 10px;
  }
  
  .chart-card {
    height: auto;
  }
  
  .chart {
    height: 250px;
  }
}
</style> 